<template>
  <table>
    <tr>
      <td>标题:<input type="text" placeholder="请输入代办标题" v-model="title"> </td>
      <td>日期:<input type="date" v-model="time"> </td>
    </tr>
    <tr>
      <td>
        <button @click="handelSubmit">添加</button>
      </td>
    </tr>
    <tr>
      <button @click="update">编辑提交</button>
    </tr>
  </table>

  <table class="show">
    <thead>
      <tr>
        <th>标题</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody @scroll="onScroll" style="height:300px;overflow-y:auto;display: block;">
      <div class="scroll" :style="{ height: list.length * 30 + 'px' }">
        <div :style="{ height: currentIndex * 30 + 'px' }"></div>
        <tr v-for="(item, index) in displayArr" :key="item.title" @dragstart="handelDragstart($event, index)"
          @dragover="handelDragover" @drop="handelDrop($event, index)" draggable="true">
          <td>{{ item.title }}</td>
          <td>{{ item.time }}</td>
          <td>
            <button @click="edit(item.id)">编辑</button>
            <button @click="del(item.id)">删除</button>
          </td>
        </tr>
      </div>
    </tbody>


  </table>
</template>

<script>
const list = []
for (let i = 1; i <= 1000; i++) {
  list.push({ title: '标题' + i, time: '2020-01-01', id: Date.now() })
}
export default {
  //tbody里面能放div吗
  //a:
  name: 'Child',

  data() {
    return {
      pid: '',
      currentIndex: 0,
      title: '',
      time: '',
      list: list

    }
  },
  methods: {
    handelSubmit() {
      if (this.title.trim() === '' || this.time.trim() === '') {
        return alert('请输入内容')
      } else {
        this.list.push({ title: this.title, time: this.time, id: Date.now() })
        localStorage.setItem('list', JSON.stringify(this.list))
        this.time = ''
        this.title = ''
      }

    },
    del(id) {
      this.list = this.list.filter(item => item.id !== id)
      localStorage.setItem('list', JSON.stringify(this.list))
    },
    edit(id) {
      this.title = this.list.find(item => item.id === id).title
      this.time = this.list.find(item => item.id === id).time
      this.pid = id
    },
    update() {
      this.list.find(item => item.id === this.pid).title = this.title
      this.list.find(item => item.id === this.pid).time = this.time
      localStorage.setItem('list', JSON.stringify(this.list))
      this.time = ''
      this.title = ''
    },
    onScroll(e) {
      const scrollTop = e.target.scrollTop
      this.currentIndex = Math.floor(scrollTop / 30)
      console.log(this.currentIndex)
    },
    handelDragstart(e, index) {
      //q:这里的两个参数是什么
      //a:第一个参数是事件对象，第二个参数是索引
      e.dataTransfer.setData('index', index)
    },
    handelDragover(e) {
      e.preventDefault()
    },
    handelDrop(e, targetIndex) {
      e.preventDefault()
      const originIndex = parseInt(e.dataTransfer.getData('index'))
      const item = this.list.splice(originIndex, 1)[0]
      this.list.splice(targetIndex, 0, item)

    }

  },
  computed: {
    displayArr() {
      return this.list.slice(this.currentIndex, this.currentIndex + 10)
    }

  }
}

</script>

<style scoped>
.show {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  height: 300px;
  overflow-y: auto;
}

.show th,
.show td,
.show tr {
  border: 1px solid #000;
  padding: 5px;
  height: 30px;
}

.show td {
  background-color: #f8f8f8;
}
</style>